<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Groups manage</title>


<script type="text/javascript">

function showGroups() {
	  var xmlhttp=new XMLHttpRequest();
	  xmlhttp.onreadystatechange=function() {
	    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	      	document.getElementById("groups").innerHTML=xmlhttp.responseText;
	    }
	  }
	  xmlhttp.open("GET","emailController.php?a=getGroups",true);
	  xmlhttp.send();
	}

function showEmails() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      	document.getElementById("emails").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","emailController.php?a=getEmails",true);
  xmlhttp.send();
}

function showMembers() {

	  var xmlhttp=new XMLHttpRequest();
	  xmlhttp.onreadystatechange=function() {
	    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	      	document.getElementById("members").innerHTML=xmlhttp.responseText;
	    }
	  }
	  
	  var e = document.getElementById("groups");
	  var ev = e.options[e.selectedIndex].value;
	  xmlhttp.open("GET","emailController.php?a=getMembers&id="+ev,true);
	  xmlhttp.send();
	}
	

function addEmail() {
	  var xmlhttp=new XMLHttpRequest();
	  xmlhttp.open("GET","emailController.php?a=addEmail&name="+ 
			  document.getElementById("emailName").value +
			  "&address="+ document.getElementById("emailAddress").value
			  ,true);
	  xmlhttp.send();
	  
	  setTimeout(showEmails,100);
	}
	
function GetFileInfo () {
    var fileInput = document.getElementById ("fileInput");

    if ('files' in fileInput) {
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];

            var data = file.getAsText ('utf-8');
            CreateInfo (data, 3);
        }
    }
    else {
        alert ("Your browser doesn't support the files property!");
    }
    
}

function CreateInfo (data, rowIdx) {
    var infoTable = document.getElementById ("info");
    var row = infoTable.rows[rowIdx];

    row.cells[1].innerHTML = data;
    row.cells[2].innerHTML = data.length;

    var txt = "";
    for (var i=0; i < data.length; i++) {
        txt += data.charCodeAt (i);
        if (i < data.length) {
            txt +=  ", ";
        }
    }
    row.cells[3].innerHTML = txt;

}
 
 
 
 



function addEmailsFromFile () {
	
	var readFile = document.getElementById('file').files[0];
	
	var reader;
    reader = new FileReader();
	
	// Read file into memory as UTF-8      
	reader.readAsText(readFile, "UTF-8");
	// success
	reader.onload = loaded;
}

function loaded(evt)
{

  var fileString = evt.target.result;
  var obj = JSON.parse(fileString);
  
  for (var i=0; i < obj.emails.length; i++) {
	  
	  var xmlhttp=new XMLHttpRequest();
	  xmlhttp.open("GET","emailController.php?a=addEmail&name="+ 
			  obj.emails[i].name +
			  "&address="+ obj.emails[i].address
			  ,true);
	  xmlhttp.send();

  }
  
  setTimeout(showEmails,100);
}



function removeEmails() {
	
	var e = document.getElementById("emails");
	
	var x = 0;
    for (x=0;x<e.length;x++)
        {
           if(e[x].selected)
           {
        	   
        	   var xmlhttp=new XMLHttpRequest();
        		  xmlhttp.open("GET","emailController.php?a=removeEmail&id="+ 
        				  e[x].value
        				  ,true);
        		  xmlhttp.send();   
           }
        }

	  
      
	  
	  setTimeout(showEmails,100);
	}
	
function removeMembers() {
	
	var e = document.getElementById("members");
	
	var x = 0;
    for (x=0;x<e.length;x++)
        {
           if(e[x].selected)
           {
        	   
        	   var xmlhttp=new XMLHttpRequest();
        		  xmlhttp.open("GET","emailController.php?a=removeMember&id="+ 
        				  e[x].value
        				  ,true);
        		  xmlhttp.send();   
           }
        }

	  
      
	  
	  setTimeout(showMembers,100);
	}
	
function addGroup() {
	  var xmlhttp=new XMLHttpRequest();
	  xmlhttp.open("GET","emailController.php?a=addGroup&name="+ 
			  document.getElementById("groupName").value 
			  ,true);
	  xmlhttp.send();
	  
	  setTimeout(showGroups,100);
	}
	
function removeGroup() {
	
	var e = document.getElementById("groups");
	
	var x = 0;
    for (x=0;x<e.length;x++)
        {
           if(e[x].selected)
           {
        	   var xmlhttp=new XMLHttpRequest();
        		  xmlhttp.open("GET","emailController.php?a=removeGroup&id="+ 
        				  e[x].value
        				  ,true);
        		  xmlhttp.send();   
           }
        }

	  
      
	  
	  setTimeout(showGroups,100);
	  e = document.getElementById("groups");
	  e.selectedIndex = 0;
	  setTimeout(showMembers,100);
	}	
	

function addMembers() {
	
	  var ge = document.getElementById("groups");
	  var gev = ge.options[ge.selectedIndex].value;
	
	  
	  var e = document.getElementById("emails");
		
		var x = 0;
	    for (x=0;x<e.length;x++)
	        {
	           if(e[x].selected)
	           {
	        	   var xmlhttp=new XMLHttpRequest();
	        		  xmlhttp.open("GET","emailController.php?a=addMember&gid="+ 
	        				  gev +
	        				  "&eid="+ e[x].value
	        				  ,true);
	        		  xmlhttp.send();
	        		  
	           }
	        }
	    
	  
	  
	  
	  setTimeout(showMembers,100);
	}

</script>



</head>
<body onload="showGroups();showEmails();setTimeout(showMembers,100);">




 <table style="width:100%">
  <tr>
  	
    <td><b>Group</b></td>
    <td><b>Members</b></td>
    <td><b>Emails</b></td>
    
  </tr>
  <tr>
    <td style="width:33%">
    
		 <select  id="groups" onchange="showMembers()" style="width:100%" >
		 
		  <!-- <option value="a">a</option>  -->
		  
		</select> 
    
    </td>
    
    <td style="width:33%">
    
		 <select multiple id="members" style="width:100%" >
		 
		 <!-- <option value="a">a</option>  -->
		 
		</select> 
    
    </td>
    
    <td style="width:33%">
    
		 <select multiple id= "emails" style="width:100%" >
		 
		 <!-- <option value="a">a</option>  -->
		 
		</select> 
    
    </td>
    
  </tr>
<tr>
<td>

<input type="text" id="groupName" style="width:99%">
<input type="submit" value="Add Group" onclick="addGroup()" style="width:100%"><br/>
<input type="submit" value="Remove Group" onclick="removeGroup()" style="width:100%">

</td>
    <td>
    
	<input type="submit" value="Add Members"  onclick="addMembers()" style="width:100%">
	<input type="submit" value="Remove Members" onclick="removeMembers()" style="width:100%">

    </td>
    
    <td>
    
    
    Address:<br>
	<input type="text" id="emailAddress" style="width:99%"><br>
	Name:<br>
	<input type="text" id="emailName" style="width:99%">
	
	
	<input type="submit" value="Add" onclick="addEmail()" style="width:100%">
	<input type="submit" value="Remove selected" onclick="removeEmails()" style="width:100%">
	
	<input id="file" type="file" multiple onchange="addEmailsFromFile()" style="width:100%">
	

	
    
    </td>
</tr>

</table> 
<hr/>
<a href="events.php">Go to events</a>

</body>
</html>